<template>
<div class="reset-container" style="background: #1896d2">
  <div class="content">
    <h3 class="title">用户忘记密码</h3>
    <el-form :label-position="labelPosition" label-width="80px" :model="obj" :rules="rules" ref="ruleForm">
      <el-form-item label="">
        <el-radio-group v-model="checkStatus">
          <el-radio :label="0">邮箱验证</el-radio>
          <el-radio :label="1">手机号验证</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="checkStatus == 0" label="">
        <el-input v-model="obj.email" placeholder="请输入邮箱地址"></el-input>
      </el-form-item>
      <el-form-item v-if="checkStatus == 1" label="">
        <el-input v-model="obj.cellphone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="obj.code" placeholder="请输入验证码" style="width:230px">13</el-input>
        <el-button type="primary" @click="sendcode" :disabled="isDisabled">{{buttonName}}</el-button>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="obj.newPassword" placeholder="请输入新密码" style="width:230px">13</el-input>
      </el-form-item>

      <el-form-item label="">
        <el-input type="password" v-model="obj.rePassword" placeholder="请重复输入新密码" style="width:230px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="tolookPwd" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
import { sendEmailCode, lookPwd, sendCellphoneCode } from '@/api/user'

export default {
  data() {
    const validateEmail = (rule, value, callback) => {
      if (this.checkStatus === 0) {
        if (value === '') {
          callback(new Error('请输入邮箱地址'));
        } else {
          const rules = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
          if (rules.test(value)) {
            callback();
          } else {
            callback(new Error('邮箱格式不正确'));
          }
        }
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (this.checkStatus === 1) {
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else {
          const rules = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
          if (rules.test(value)) {
            callback();
          } else {
            callback(new Error('手机号格式不正确'));
          }
        }
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        const rules = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,}$/
        if (rules.test(value)) {
          callback();
        } else {
          callback(new Error('密码必须包含英文、数字和特殊字符，且8位以上'));
        }
        if (this.obj.rePassword !== '') {
          this.$refs.ruleForm.validateField('rePassword');
        }
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.obj.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        const rules = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,}$/
        if (rules.test(value)) {
          callback();
        } else {
          callback(new Error('密码必须包含英文、数字和特殊字符，且8位以上'));
        }
      }
    };
    return {
      labelPosition: 'top',
      login_method: 'first',
      buttonName: '获取验证码',
      isDisabled: false,
      time: 60,
      checkStatus: 0,
      obj: {
        email: '',
        cellphone: '',
        code: '',
        newPassword: '',
        rePassword: ''
      },
      rules: {
        email: [
          { validator: validateEmail, trigger: 'blur' }
        ],
        cellphone: [
          { validator: validatePhone, trigger: 'blur' }
        ],
        newPassword: [
          { validator: validatePass, trigger: 'blur' }
        ],
        rePassword: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async sendcode() {
      const me = this;
      me.isDisabled = true;
      const interval = window.setInterval(() => {
        me.buttonName = '（' + me.time + '秒）后重新发送';
        --me.time;
        if (me.time < 0) {
          me.buttonName = '重新发送';
          me.time = 60;
          me.isDisabled = false;
          window.clearInterval(interval);
        }
      }, 1000);

      if (this.checkStatus === 0) {
        const { success } = await sendEmailCode(this.obj)
        if (success) {
          this.$message.success('发送成功')
        } else {
          this.$message.error('发送失败')
        }
      } else if (this.checkStatus === 1) {
        const preload = {
          code: this.obj.code,
          cellphone: this.obj.cellphone
        }
        const { success } = await sendCellphoneCode(preload)
        if (success) {
          this.$message.success('发送成功')
        } else {
          this.$message.error('发送失败')
        }
      }
    },
    tolookPwd() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.resetPwd()
        }
      })
    },
    async resetPwd() {
      let objA = {}
      if (this.checkStatus == 0) {
        objA = this.obj
      } else if (this.checkStatus == 1) {
        objA.code = this.obj.code
        objA.newPassword = this.obj.newPassword
        objA.cellphone = this.cellphone
      }
      const { message, success } = await lookPwd(objA)
      if (success) {
        this.$message.success('修改成功');
        this.$router.push({ path: '/' })
      } else {
        this.$message.error(message);
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss";
.el-radio__input.is-checked+.el-radio__label {
    color: #000000;
}
.el-radio {
    color: #000000;
}
.el-radio__input.is-checked .el-radio__inner {
    border-color: #000;
    background: #000;
}
.reset-container {
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-size: 20px;

    .content {
        width: 986px;
        height: 518px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        // border:1px solid #ccc;
        transform: translate(-50%,-50%);
        .left-content,
        .right-content {
            width: 500px;
            height: 500px;
            // border: 2px dashed  #CBBD63;
            // background-color: rgba(225, 255, 255, 0.1);
            -webkit-filter: drop-shadow(4px 4px 4px #CBBD63);
            filter: drop-shadow(4px 4px 4px #CBBD63);

        }

        .left-content {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }

        .right-content {
            position: absolute;
            right: 0;
            bottom: 0;
            // background-color: rgba(225, 255, 255, 0.6);
            z-index: 3;

            .box-card {
                .clearfix {}
                .item {
                    position: relative;
                    // tabs
                    .el-form-item {
                        margin-top: -12px;
                    }
                    .el-tabs__nav-wrap {
                        width: 180px;
                        padding-left: 12px;
                        overflow: hidden;
                    }
                    // lable
                    .el-form-item__label {
                        display: block;
                        margin-left: 60px;
                        height: 36px;
                        color: #9ba3af;
                    }

                    // input-box
                    .el-form-item__content {
                        width: 340px;

                        .el-button {
                            width: 100px;
                        }
                    }
                    .toLogin {
                        display: inline-block;
                        margin-left: 20px;
                        color: darkslateblue;
                        cursor: pointer;
                        font-size: 14px;
                    }
                }
            }
        }

    }
}
</style>
